Tạo menu dạng Material Design với hiệu ứng tuyệt đẹp cho Blogger

Chào các bạn, trả lời yêu cầu của một bạn yêu cầu mình chia sẻ menu bên góc phải thì bài viết hôm nay mình sẽ hướng dẫn các bạn chèn menu đấy vào Blogger.
Đây là một menu dạng material design tuyệt đẹp với phong cách đóng/mở dạng circle. Menu này hoàn toàn sử dụng CSS nên sẽ không ảnh hưởng đến tốc độ cũng như sẽ không xung đột với bất cứ thứ gì khác!

CÁC BƯỚC THỰC HIỆN

Bước 1. Đăng nhập Blogger ➔ Chỉnh sửa HTML.
Bước 2. Chèn đoạn CSS dưới vào trước thẻ ]]></b:skin> trong mẫu.

label .hamburger{position:absolute;top:135px;left:50px;width:30px;height:4px;background:#666;display:block;-webkit-transform-origin:center;transform-origin:center;-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out}
label .hamburger:after,label .hamburger:before{-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out;content:"";position:absolute;display:block;width:100%;height:100%;background:#666}
label .hamburger:before{top:-10px}
label .hamburger:after{bottom:-10px}
label input{display:none}
label input:checked + .menu{box-shadow:0 0 0 100vw #FFF,0 0 0 100vh #FFF;border-radius:0}
label input:checked + .menu .hamburger{-webkit-transform:rotate(45deg);transform:rotate(45deg)}
label input:checked + .menu .hamburger:after{-webkit-transform:rotate(90deg);transform:rotate(90deg);bottom:0}
label input:checked + .menu .hamburger:before{-webkit-transform:rotate(90deg);transform:rotate(90deg);top:0}
label .menu{position:fixed;right:-100px;top:-100px;z-index:100;width:200px;height:200px;background:#FFF;border-radius:50%;-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out;box-shadow:0 0 0 0 #FFF,0 0 0 0 #FFF;cursor:pointer}
label ul{z-index:999;width:700px;max-width:100%;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);opacity:0;visibility:hidden;-webkit-transition:.5s ease-in-out}
label ul li {list-style: none; width: 50%; float: left;}
label a{padding:0 0 1em 0; display: block; color: #666; font: 400 20px "Roboto Slab"; text-transform: capitalize; text-decoration: none; text-align: left;transition:1s ease-out}
label a:hover,label a:focus{color:#ce8342}
label input:checked + .menu + ul{opacity:1;visibility:visible}
label ul li img {position:relative;top:5px;margin:0 6px 0 0;width:25px;height:25px;border-radius:100%}

Bước 3. Chèn đoạn code bên dưới vào sau thẻ <body> hoặc trước thẻ </body> trong mẫu.

<label>
<input type=’checkbox’>


</input>
<ul>
<li><a class=’bsw_cate’ href=’//bacsiwindows.com/p/about.html’ itemprop=’url’ title=’Giới thiệu về admin’><img src=’//2.bp.blogspot.com/-K7fhgUw7iFQ/WFfTzbq8ieI/AAAAAAAABzY/CyJn6JRvYwoOx7bVf6qr218QlGPfXlQcwCLcB/s1600/gioi-thieu-about-us.png’/>Giới thiệu</a></li>
<li><a class=’bsw_cate’ href=’//bacsiwindows.com/p/contact.html’ itemprop=’url’ title=’Liên hệ/góp ý/báo lỗi’><img src=’//1.bp.blogspot.com/-lFe0RDSnmQ8/WFfTzjjDEEI/AAAAAAAABzk/9KXmoh_lo60mfkiiuDmq1cmnp-OZjXYqwCLcB/s1600/lien-he.png’/>Liên hệ – báo lỗi</a></li>
<li><a class=’bsw_cate’ href=’//bacsiwindows.com/p/comments.html’ itemprop=’url’ title=’Bình luận mới nhất’><img src=’//4.bp.blogspot.com/-TyrYKP4hEu8/WH3ythnQkOI/AAAAAAAACW4/aYgMbpDEJ3EUjmdQQbc_TF5JlGnOWt7ZwCLcB/s1600/recent-comments-icon—-blogttcn-blogspot-com.jpg’/>Bình luận mới nhất</a></li>
<li><a class=’bsw_cate’ href=’//bacsiwindows.com/p/noi-quy.html’ itemprop=’url’ title=’Một số nội quy về bình luận trên blog’><img src=’//4.bp.blogspot.com/-8_UI1izaIbM/WFfT0F5dPeI/AAAAAAAABzo/uqTNgqpIoTwiHaxBG0UbfKrm9UlsrKh0QCLcB/s1600/luu-y.png’/>Một số nội quy</a></li>
<li><a class=’bsw_cate’ href=’//bacsiwindows.com/p/ma-hoa-code.html’ itemprop=’url’ title=’Mã hóa code HTML’><img src=’//2.bp.blogspot.com/-ca0eVW2nE1Y/WFfT0CDqzgI/AAAAAAAABzs/cM9IFmykWD0pDOvBpqSI5pybEIHFg_KoACLcB/s1600/ma-hoa-code.png’/>Mã hóa code</a></li>
<li><a class=’bsw_cate’ href=’//bacsiwindows.com/ps’ itemprop=’url’ target=’_blank’ title=’Chỉnh sửa ảnh – Photoshop Online miễn phí’><img src=’//3.bp.blogspot.com/-Ec7Cg8qFIKU/WFfT1V62KxI/AAAAAAAAB0U/2qu2g6z-RhcOKhC767gEsDPa2NAwWZkzACLcB/s1600/thu-thuat-photoshop.png’/>Photoshop Online</a></li>
<li><a class=’bsw_cate’ href=’//bacsiwindows.com/p/nen-css.html’ itemprop=’url’ title=’Nén/rút gọn CSS’><img src=’//2.bp.blogspot.com/-Z97zrwW-6BY/WFfT0Jli1uI/AAAAAAAABzw/wEhsENbDw0QmuKs5Phxrg4ZvOxsp7nZtgCLcB/s1600/nen-css.png’/>Nén CSS</a></li>
<li><a class=’bsw_cate’ href=’/search/label/Thủ Thuật Blogger’ itemprop=’url’ title=’Thủ thuật Blogger/Blogspot’><img src=’//4.bp.blogspot.com/-7m7w1GyVFAE/WFfTzZCbkAI/AAAAAAAABzU/V2_aMSJejlwHAvcUMAToB9-koKhZqZragCLcB/s1600/blogger.png’/>Thủ thuật blogger</a></li>
<li><a class=’bsw_cate’ href=’/search/label/Phần Mềm’ itemprop=’url’ title=’Download phần mềm máy tính’><img src=’//4.bp.blogspot.com/-Js19uXikRiE/WFfT0yhc7hI/AAAAAAAAB0A/RZs1PFfdyMgDtVTnT66oO2pbapeBBLI7ACLcB/s1600/phan-mem.png’/>Phần mềm máy tính</a></li>
<li><a class=’bsw_cate’ href=’/search/label/Game Online’ itemprop=’url’ title=’Download game online’><img src=’//2.bp.blogspot.com/-H_YLzBHz3cs/WFfTzWqaRSI/AAAAAAAABzc/bwDbMrHSLxIycRJg_A_NMnUWRipSxUTZgCLcB/s1600/game-online.png’/>Game Online</a></li>
<li><a class=’bsw_cate’ href=’/search/label/Thủ Thuật Máy Tính’ itemprop=’url’ title=’Thủ thuật máy tính’><img src=’//2.bp.blogspot.com/-tM7np0KmaoU/WFfT1LtCCWI/AAAAAAAAB0M/roJu_egcGGYj_jvF7FSR0joOlMyXdJmCACLcB/s1600/thu-thuat-may-tinh.png’/>Thủ thuật máy tính</a></li>
<li><a class=’bsw_cate’ href=’/search/label/Windows 10′ itemprop=’url’ title=’Thủ thuật Windows 10′><img src=’//2.bp.blogspot.com/-ESShpg3bgJY/WFfT1tw8hBI/AAAAAAAAB0Y/PcJ4q9M271s3GreXY9ePkFc8Vjuw3IZCwCLcB/s1600/thu-thuat-windows-10.png’/>Thủ thuật windows 10</a></li>
<li><a class=’bsw_cate’ href=’/search/label/Thủ Thuật Office’ itemprop=’url’ title=’Thủ thuật Office’><img src=’//2.bp.blogspot.com/-Xoc3iSJOTxc/WFfT1FUwSlI/AAAAAAAAB0Q/4LaqlbcCIBQgPP2abXU1vOIeWZ0K4ETaACLcB/s1600/thu-thuat-office.jpg’/>Thủ thuật office</a></li>
<li><a class=’bsw_cate’ href=’/search/label/Thủ Thuật Facebook’ itemprop=’url’ title=’Thủ thuật Facebook’><img src=’//4.bp.blogspot.com/-F5oqU_zFEsQ/WFfT04scSTI/AAAAAAAAB0I/-p1gE8_mSQAhdL-WV-U_r42qYOR5oaD7QCLcB/s1600/thu-thuat-facebook.jpg’/>Thủ thuật facebook</a></li>
<li><a class=’bsw_cate’ href=’/search/label/Thủ Thuật Youtube’ itemprop=’url’ title=’Thủ thuật Youtube’><img src=’http://www.iconarchive.com/download/i58895/dakirby309/windows-8-metro/Web-Youtube-alt-2-Metro.ico’/>Thủ thuật youtube</a></li>
<li><a class=’bsw_cate’ href=’//bacsiwindows.com/2016/12/huong-dan-download-va-cai-dat-photoshop-cs3-portable.html’ itemprop=’url’ title=’Adobe Photoshop’><img src=’//3.bp.blogspot.com/-Ec7Cg8qFIKU/WFfT1V62KxI/AAAAAAAAB0U/2qu2g6z-RhcOKhC767gEsDPa2NAwWZkzACLcB/s1600/thu-thuat-photoshop.png’/>Adobe Photoshop</a></li>
<li><a class=’bsw_cate’ href=’//bacsiwindows.com/2016/12/avast-free-antivirus-phan-mem-diet-virus-tot-nhat-he-mat-troi.html’ itemprop=’url’ title=’Phần mềm diệt virus’><img src=’//2.bp.blogspot.com/–lBq5fdPNY8/WFfT0bPcoRI/AAAAAAAABz4/BUN5CpUIVuoD9lmKFRvOPQddV6sI0KGHwCLcB/s1600/phan-mem-diet-virus.png’/>Antivirus</a></li>
<li><a class=’bsw_cate’ href=’//bacsiwindows.com/2016/12/download-idm-full-crack-su-dung-vinh-vien.html’ itemprop=’url’ title=’Phần mềm download mọi thứ – IDM’><img src=’//1.bp.blogspot.com/-Wo7vcHZRIjs/WFfTz8LZWqI/AAAAAAAABzg/hiLfj-EiSHQqwc2y1v0pLa8iPIqtBWBBgCLcB/s1600/internet-download-manager.png’/>Internet Download Manager</a></li>
<li><a class=’bsw_cate’ href=’//bacsiwindows.com/2016/12/download-ccleaner-phan-mem-don-rac-toi-uu-hoa-he-thong-tot-nhat.html’ itemprop=’url’ title=’Phần mềm dọn dẹp rác trên máy tính’><img src=’//4.bp.blogspot.com/-7Sx_W8ETE4w/WFfT0bCsTxI/AAAAAAAABz0/Em-pt-JPP4wwxBttqd6S1GIpk2H7pZPWQCLcB/s1600/phan-mem-ccleaner.png’/>Piriform CCleaner</a></li>
<li><a class=’bsw_cate’ href=’//bacsiwindows.com/2016/12/phan-mem-go-tieng-viet-unikey-moi-nhat.html’ itemprop=’url’ title=’Phần mềm gõ Tiếng Việt’><img src=’//3.bp.blogspot.com/-HxdKjhKP-Os/WFfT0h-PdjI/AAAAAAAABz8/9sYxYZtB-xctla7lcBsWAhR8qLLxrdj_ACLcB/s1600/phan-mem-unikey-icon.jpg’/>Unikey Vietnam</a></li>
</ul>
</label>

Bước 4. Lưu mẫu.

TỔNG KẾT

Đây là mẫu menu nhẹ, gọn và đẹp nhất theo cá nhân mình đánh giá. Ngoài ra nó còn không sử dụng javascript nữa, đây có thể xem là mẫu menu tuyệt vời và hoàn hảo! Hãy áp dụng vào blog của bạn nhé! Chúc thành công.

CÁC BƯỚC THỰC HIỆN

TỔNG KẾT

Leave a Comment Hủy